<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>评论框示例</title>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f5f5f5;
        }

        .comment-container {
            max-width: 800px;
            margin: 0 auto;
            background-color: white;
            border-radius: 8px;
            padding: 20px;
        }

        .comment {
            display: flex;
            margin-bottom: 20px;
            padding-bottom: 20px;
            border-bottom: 1px solid #eee;
        }

        .avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: #ddd;
            margin-right: 15px;
            flex-shrink: 0;
        }

        .comment-content {
            flex-grow: 1;
        }

        .username {
            display: flex;
            align-items: center;
            margin-bottom: 5px;
        }

        .level-badge {
            background-color: #ff4444;
            color: white;
            padding: 2px 6px;
            border-radius: 4px;
            font-size: 12px;
            margin-left: 8px;
        }

        .comment-text {
            margin: 5px 0;
            color: #333;
        }

        .comment-meta {
            display: flex;
            align-items: center;
            color: #999;
            font-size: 12px;
        }

        .comment-meta > div {
            margin-right: 15px;
        }

        .reply-button {
            color: #666;
            cursor: pointer;
            font-size: 14px;
        }

        .reply-button:hover {
            color: #ff4444;
        }

        .reply-count {
            color: #ff4444;
            cursor: pointer;
        }
    </style>
</head>
<body>

</body>
</html>